<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
    <title>移动端事件封装</title>
    <link rel="stylesheet" href="./css/common.css" />
    <script src="./js/rem.js"></script>
    <style>
        .box {
            width: 2rem;
            height: 2rem;
            background-color: rgba(0, 0, 0, 0.5);
            position: relative;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box"></div>
    </div>
    <script>
        //封装事件对象的类
        class TouchesEvent {
            /**
             * 1、单击事件
             * @date 2021-05-22
             * @param {any} el 点击的元素对象
             * @param {any} callback 点击元素时执行的函数
             */
            tap(el, callback) {
                let startX, startY, endX, endY
                //监听触摸开始
                el.addEventListener(
                    'touchstart',
                    function (e) {
                        let touch = e.changedTouches[0]
                        startX = touch.clientX
                        startY = touch.clientY
                    },
                    false
                )
                //监听触摸结束
                el.addEventListener(
                    'touchend',
                    function (e) {
                        let touch = e.changedTouches[0]
                        endX = touch.clientX
                        endY = touch.clientY
                        //计算触摸点的偏移量<10
                        let offestX = Math.abs(endX - startX)
                        let offestY = Math.abs(endY - startY)
                        console.log(offestX, offestY)
                        if (offestX < 10 && offestY < 10) {
                            callback()
                        }
                    },
                    false
                )
            }

            /**
             * 长按事件
             * @date 2021-05-22
             * @param {any} el 长按事件的元素
             * @param {any} callback 长按事件的回调函数
             */
            longTap(el, callback) {
                let startX,
                    startY,
                    endX,
                    endY,
                    timeId = null,
                    x = 0,
                    y = 0
                // 1、在触摸开始时定义定时器，time=750ms后执行回调函数
                el.addEventListener(
                    'touchstart',
                    function (e) {
                        let touch = e.changedTouches[0]
                        startX = touch.clientX
                        startY = touch.clientY
                        //判断是否有定时器
                        if (timeId) {
                            clearTimeout(timeId)
                            timeId = null
                        }
                        //定义定时器
                        timeId = setTimeout(function () {
                            callback()
                        }, 750)
                        console.log('touchstart--->定义定时时器' + timeId)
                    },
                    false
                )
                // 2、如果有滑动操作，就取消当前定时器
                el.addEventListener(
                    'touchmove',
                    function (e) {
                        let touch = e.changedTouches[0]
                        endX = touch.clientX
                        endY = touch.clientY
                        x += endX - startX
                        y += endY - startY
                        startY = endY
                        startX = endX
                        if (Math.abs(x) > 10 || Math.abs(y) > 10) {
                            console.log('touchmove--->取消当前定时器' + timeId)
                            if (timeId) {
                                clearTimeout(timeId)
                                timeId = null
                            }
                        }
                    },
                    false
                )
                // 3、长按事件结束后清空定时器
                el.addEventListener(
                    'touchend',
                    function (e) {
                        if (timeId) {
                            console.log('touchend--->销毁定时器' + timeId)
                            clearTimeout(timeId)
                            timeId = null
                        }
                    },
                    false
                )
            }
        }

        let box = document.querySelector('.box')
        let eventObject = new TouchesEvent()
        //给box绑定单击事件
        eventObject.longTap(box, function () {
            box.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'
        })
    </script>
</body>

</html>